<template>
  <div class="nav-out-header">
    <div class="nav-header">
      <el-icon @click="isExpand = !isExpand" v-if="!isExpand"><fold /></el-icon>
      <el-icon @click="isExpand = !isExpand" v-else><expand /></el-icon>

      <!-- 面包屑导航 -->
      <div v-if="$store.state.breadcrumb.length !== 0" class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/main' }">{{
            $store.state.breadcrumb[0]
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ $store.state.breadcrumb[1] }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div>

    <!-- 右侧用户头像区域 -->

    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        >
        </el-avatar>
        {{ store.state.login.userInfo.name
        }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          <el-dropdown-item>用户信息</el-dropdown-item>
          <el-dropdown-item>系统管理</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue"
import { useStore } from "vuex"
import router from "@/router/index"
import localCach from "@/api/localCach"
export default defineComponent({
  emits: ["changeStatus"],
  setup(props, { emit }) {
    const isExpand = ref(false)

    watch(isExpand, (newValue) => {
      // 发出事件
      emit("changeStatus", newValue)
    })
    const store = useStore()

    const loginOut = () => {
      localCach.deleteCach("token")
      router.push("/")
    }

    return {
      isExpand,
      store,
      loginOut,
    }
  },
})
</script>
<style lang="less" scoped>
.nav-header {
  .el-icon {
    font-size: 25px;
    margin: 20px 0 0 -10px;
    cursor: pointer;
  }
}

.nav-header {
  display: flex;
  justify-self: start;
  align-items: center;
  width: 300px;
}

.breadcrumb {
  margin: 20px 0 0 10px;
}

.nav-out-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-dropdown {
  margin-top: 20px;
  .el-dropdown-link {
    display: flex;
    align-items: center;
    .el-avatar {
      margin-right: 5px;
    }
  }
}
</style>
